<template>
    <div class="container">
        <h1>评论管理-vuex版</h1>
        <hr>
        <!-- 发布评论 -->
        <div class="list-group">
             <!-- 发布评论 -->
            <cmt-post
                @addComment="addComment"
            ></cmt-post>
            <!-- 评论单项 -->
            <cmt-item
                v-for="(item) in comments"
                :key="item.id"
                :item="item"
                @delComment="delComment"
            ></cmt-item>
        </div>
    </div>
</template>
<script>
import CmtPost from "./CmtPost";
import CmtItem from "./CmtItem";
export default {
    components:{
        CmtPost,
        CmtItem
    },
    data() {
        return {
            comments: [
                {
                    id: 1,
                    content: "人生若只如初见, 又何须伤感别离",
                    author: "duans",
                    posttime: new Date("2019/03/08").toLocaleDateString()
                },

                {
                    id: 2,
                    content: "若一切都已云烟成雨, 我能否变成淤泥,再一次沾染你?",
                    author: "duans",
                    posttime: new Date().toLocaleDateString()
                },
                {
                    id: 4,
                    content: "我多想再见你一面, 哪怕匆匆一眼就别离",
                    author: "duans",
                    posttime: new Date().toLocaleDateString()
                },
                {
                    id: 3,
                    content: "我多想再见你一面, 至少玩笑话还说得起",
                    author: "duans",
                    posttime: new Date("2019/09/18").toLocaleDateString()
                }
            ]
        }
    },
    methods:{
        // 自定义事件处理函数
        delComment(id){
            this.comments=this.comments.filter(item=>id!=item.id);
        },
        //  发布评论
        addComment(comment){
            this.comments.unshift(comment);
        }
    }
};
</script>
<style scoped lang="css">
</style>